import { defineComponent, reactive, Teleport } from "vue";
import styles from "./qrcode.module.less";

export default defineComponent({
  setup(props, { expose }) {
    const state = reactive({
      isOpen: false,
      url: '',
    })
    const open = (url: string) => {
      state.url = url;
      state.isOpen = true;
    }
    const close = () => {
      state.url = '';
      state.isOpen = false;
    }
    expose({
      open,
    })
    return () => (
      <Teleport to="body">
        {
          state.isOpen && <div class={styles.floating} onClick={() => { close() }}>
            <img src={state.url} onClick={(e) => { e.stopPropagation() }} />
          </div>
        }
      </Teleport>
    )
  }
})